<template>
    <div class="auth-container">
      <!-- 动态粒子背景 -->
      <div id="particles-js" class="particles-background"></div>
      
      <!-- 主卡片 -->
      <transition name="card" appear>
        <div class="auth-card">
          <transition name="title" appear mode="out-in">
            <h1 v-if="isLoginMode" key="login">欢迎回来</h1>
            <h1 v-else key="register">创建账户</h1>
          </transition>
          
          <!-- 登录 -->
          <div class="auth-tabs">
            <button 
              :class="{ active: activeTab === 'traditional' }" 
              @click="switchTab('traditional')"
            >
              <i class="fas fa-user"></i> 传统登录
            </button>
            <button 
              :class="{ active: activeTab === 'wallet' }" 
              @click="switchTab('wallet')"
            >
              <i class="fab fa-ethereum"></i> 钱包登录
            </button>
          </div>
          
          <!-- 传统登录表单 -->
          <transition name="form-switch" mode="out-in">
            <form v-if="activeTab === 'traditional'" @submit.prevent="handleTraditionalAuth" class="auth-form">
              <div class="form-group">
                <label for="email"></label>
                <input 
                  v-model="form.email" 
                  type="email" 
                  id="email" 
                  required 
                  placeholder="请输入邮箱"
                  @focus="animateInput($event)"
                >
              </div>
              
              <div class="form-group">
                <label for="password"></label>
                <input 
                  v-model="form.password" 
                  type="password" 
                  id="password" 
                  required 
                  :placeholder="isLoginMode ? '请输入密码' : '请设置密码(至少6位)'"
                  :minlength="isLoginMode ? 1 : 6"
                  @focus="animateInput($event)"
                >
              </div>
              
              <div v-if="!isLoginMode" class="form-group">
                <label for="confirmPassword">确认密码</label>
                <input 
                  v-model="form.confirmPassword" 
                  type="password" 
                  id="confirmPassword" 
                  required 
                  placeholder="请再次输入密码"
                  minlength="6"
                  @focus="animateInput($event)"
                >
              </div>
              
              <button type="submit" class="auth-button" @mouseenter="hoverButton">
                <span>{{ isLoginMode ? '登录' : '注册' }}</span>
                <i class="fas fa-arrow-right"></i>
              </button>
              
              <div class="auth-switch">
                <span @click="toggleAuthMode" @mouseenter="hoverText">
                  {{ isLoginMode ? '没有账号？立即注册' : '已有账号？立即登录' }}
                </span>
              </div>
            </form>
          </transition>
          
          <!-- MetaMask钱包登录 -->
          <transition name="form-switch" mode="out-in">
            <div v-if="activeTab === 'wallet'" class="wallet-auth">
              <div class="wallet-info">
                <img src="https://metamask.io/images/metamask-logo.png" alt="MetaMask" class="wallet-logo">
                <p>通过MetaMask钱包快速安全登录</p>
              </div>
              
              <button @click="connectWallet" class="wallet-button" @mouseenter="hoverButton">
                <i class="fab fa-ethereum"></i> 连接MetaMask钱包
              </button>
              
              <div v-if="walletAddress" class="wallet-connected">
                <p>已连接钱包: {{ shortenAddress(walletAddress) }}</p>
                <button @click="handleWalletAuth" class="auth-button" @mouseenter="hoverButton">
                  <span>{{ isLoginMode ? '钱包登录' : '钱包注册' }}</span>
                  <i class="fas fa-arrow-right"></i>
                </button>
              </div>
              
              <div v-if="walletError" class="error-message">
                <i class="fas fa-exclamation-circle"></i> {{ walletError }}
              </div>
            </div>
          </transition>
          
          <transition name="fade-message">
            <div v-if="errorMessage" class="error-message">
              <i class="fas fa-exclamation-circle"></i> {{ errorMessage }}
            </div>
          </transition>
        </div>
      </transition>
      
      <!-- 浮动装饰元素 -->
      <div class="floating-elements">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router'; 
  
  const router = useRouter();
  
  // 认证模式：登录/注册
  const isLoginMode = ref(true);
  const activeTab = ref('traditional');
  const walletAddress = ref('');
  const walletError = ref('');
  const errorMessage = ref('');
  
  // 表单数据
  const form = ref({
    email: '',
    password: '',
    confirmPassword: ''
  });
  
  // 切换登录/注册模式
  const toggleAuthMode = () => {
    isLoginMode.value = !isLoginMode.value;
    errorMessage.value = '';
  };
  
  // 切换标签页
  const switchTab = (tab) => {
    activeTab.value = tab;
    errorMessage.value = '';
    walletError.value = '';
  };
  
  // 处理传统登录/注册
  const handleTraditionalAuth = () => {
    errorMessage.value = '';
    
    // 验证表单
    if (!form.value.email || !form.value.password) {
      errorMessage.value = '请输入邮箱和密码';
      return;
    }
    
    if (!isLoginMode.value && form.value.password !== form.value.confirmPassword) {
      errorMessage.value = '两次输入的密码不一致';
      return;
    }
    
    // 模拟API调用
    simulateAPICall();
  };
  
  // 检查是否安装了MetaMask
  const checkMetaMask = () => {
    return typeof window.ethereum !== 'undefined';
  };
  
  // 连接钱包
  const connectWallet = async () => {
    walletError.value = '';
    
    if (!checkMetaMask()) {
      walletError.value = '请安装MetaMask钱包扩展';
      return;
    }
    
    try {
      // 请求账户访问权限
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      walletAddress.value = accounts[0];
    } catch (error) {
      walletError.value = '连接钱包失败: ' + error.message;
    }
  };
  
  // 处理钱包登录/注册
  const handleWalletAuth = () => {
    simulateAPICall();
  };
  
  // 模拟API调用
  const simulateAPICall = () => {
    setTimeout(() => {
      router.push('/Home');
    }, 1000);
  }
  
  // 缩短钱包地址显示
  const shortenAddress = (address) => {
    return address ? `${address.substring(0, 6)}...${address.substring(address.length - 4)}` : '';
  };
  
  // 动画效果
  const animateInput = (event) => {
    const input = event.target;
    const label = input.previousElementSibling;
    
    label.classList.add('active');
    input.addEventListener('blur', () => {
      if (!input.value) label.classList.remove('active');
    }, { once: true });
  };
  
  const hoverButton = (event) => {
    const button = event.target;
    button.classList.add('hover');
    setTimeout(() => button.classList.remove('hover'), 500);
  };
  
  const hoverText = (event) => {
    const text = event.target;
    text.classList.add('hover');
    setTimeout(() => text.classList.remove('hover'), 300);
  };
  
  // 初始化粒子背景
  const initParticles = () => {
    if (window.particlesJS) {
      window.particlesJS('particles-js', {
        particles: {
          number: { value: 80, density: { enable: true, value_area: 800 } },
          color: { value: "#4a6bff" },
          shape: { type: "circle" },
          opacity: { value: 0.5, random: true },
          size: { value: 3, random: true },
          line_linked: { enable: true, distance: 150, color: "#4a6bff", opacity: 0.4, width: 1 },
          move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: { enable: true, mode: "repulse" },
            onclick: { enable: true, mode: "push" }
          }
        }
      });
    }
  };
  
  // 监听账户变化
  onMounted(() => {
    if (checkMetaMask()) {
      window.ethereum.on('accountsChanged', (accounts) => {
        walletAddress.value = accounts[0] || '';
      });
    }
    
    // 加载Font Awesome
    const faScript = document.createElement('script');
    faScript.src = 'https://kit.fontawesome.com/a076d05399.js';
    document.head.appendChild(faScript);
    
    // 加载particles.js
    const particlesScript = document.createElement('script');
    particlesScript.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
    particlesScript.onload = initParticles;
    document.head.appendChild(particlesScript);
  });
  </script>
  
  <style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
  
  :root {
    --primary-color: #4a6bff;
    --primary-light: rgba(74, 107, 255, 0.1);
    --secondary-color: #f6851b;
    --secondary-light: rgba(246, 133, 27, 0.1);
    --text-color: #2c3e50;
    --light-text: #7f8c8d;
    --bg-color: #f9f9ff;
    --card-bg: rgba(255, 255, 255, 0.98);
    --error-color: #ff4d4f;
    --success-color: #52c41a;
    --transition-base: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    line-height: 1.6;
  }
  
  .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    padding: 20px;
    overflow: hidden;
  }
  
  .particles-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .auth-card {
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: var(--transition-base);
    will-change: transform, box-shadow;
  }
  
  .auth-card:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px) perspective(1000px) rotateX(1deg) rotateY(1deg) scale(1.01);
  }
  
  h1 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 28px;
    position: relative;
    transition: var(--transition-base);
  }
  
  h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
    transition: var(--transition-base);
  }
  
  .auth-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: var(--transition-base);
  }
  
  .auth-tabs button {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--light-text);
    border-bottom: 3px solid transparent;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }
  
  .auth-tabs button::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .auth-tabs button:hover {
    color: var(--primary-color);
  }
  
  .auth-tabs button.active {
    color: var(--primary-color);
    font-weight: 500;
  }
  
  .auth-tabs button.active::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .auth-form {
    display: flex;
    flex-direction: column;
  }
  
  .form-group {
    margin-bottom: 20px;
    position: relative;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--light-text);
    font-size: 14px;
    font-weight: 500;
    transform-origin: left center;
    transition: var(--transition-base);
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--card-bg);
    padding: 0 5px;
    pointer-events: none;
    z-index: 1;
  }
  
  .form-group label.active {
    transform: translateY(-40px) scale(0.85);
    color: var(--primary-color);
    font-weight: 600;
  }
  
  .form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 16px;
    transition: var(--transition-base);
    background: transparent;
    position: relative;
    z-index: 2;
  }
  
  .form-group input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
  }
  
  .auth-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(74, 107, 255, 0.2);
  }
  
  .auth-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.8s ease;
    z-index: -1;
  }
  
  .auth-button.hover::before {
    left: 100%;
  }
  
  .auth-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(74, 107, 255, 0.3);
  }
  
  .auth-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(74, 107, 255, 0.3);
  }
  
  .auth-button i {
    transition: var(--transition-fast);
  }
  
  .auth-button:hover i {
    transform: translateX(5px);
  }
  
  .auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--light-text);
  }
  
  .auth-switch span {
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    display: inline-block;
    font-weight: 500;
  }
  
  .auth-switch span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: var(--transition-base);
  }
  
  .auth-switch span.hover::after {
    width: 100%;
  }
  
  .auth-switch span:hover {
    text-shadow: 0 0 8px rgba(74, 107, 255, 0.2);
  }
  
  .wallet-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .wallet-info {
    margin-bottom: 25px;
  }
  
  .wallet-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    object-fit: contain;
    transition: var(--transition-base);
    transform-style: preserve-3d;
  }
  
  .wallet-logo:hover {
    transform: rotateY(180deg) scale(1.1);
  }
  
  .wallet-button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 16px 25px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(246, 133, 27, 0.2);
  }
  
  .wallet-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.8s ease;
    z-index: -1;
  }
  
  .wallet-button:hover::before {
    left: 100%;
  }
  
  .wallet-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(246, 133, 27, 0.3);
  }
  
  .wallet-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(246, 133, 27, 0.3);
  }
  
  .wallet-connected {
    margin-top: 25px;
    width: 100%;
    transition: var(--transition-base);
  }
  
  .error-message {
    color: var(--error-color);
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-base);
  }
  
  .floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(74, 107, 255, 0.08);
    backdrop-filter: blur(10px);
    animation: float 15s infinite ease-in-out;
    transition: var(--transition-base);
    will-change: transform;
  }
  
  .circle-1 {
    width: 150px;
    height: 150px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }
  
  .circle-2 {
    width: 200px;
    height: 200px;
    bottom: 15%;
    right: 10%;
    animation-delay: 2s;
  }
  
  .circle-3 {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 30%;
    animation-delay: 4s;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateY(-30px) rotate(5deg) scale(1.05);
    }
  }
  
  /* 过渡动画 */
  .card-enter-active {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .card-enter-from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  
  .title-enter-active,
  .title-leave-active {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .title-enter-from,
  .title-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }
  
  .form-switch-enter-active {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .form-switch-leave-active {
    transition: all 0.3s cubic-bezier(0.36, 0, 0.66, -0.56);
  }
  
  .form-switch-enter-from {
    opacity: 0;
    transform: translateX(30px);
  }
  
  .form-switch-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }
  
  .fade-message-enter-active,
  .fade-message-leave-active {
    transition: all 0.3s ease;
  }
  
  .fade-message-enter-from,
  .fade-message-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }
  
  /* 响应式设计 */
  @media (max-width: 480px) {
    .auth-card {
      padding: 30px 20px;
      border-radius: 16px;
    }
    
    h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    .auth-tabs button {
      font-size: 14px;
      padding: 10px;
    }
    
    .form-group input {
      padding: 12px;
    }
    
    .auth-button, .wallet-button {
      padding: 14px;
      font-size: 15px;
    }
  }
  </style>